---
title: Svelte + Hanko
sidebar_label: Svelte
keywords:
  - hanko
  - svelte
  - integration
sidebar_custom_props:
  docCardIconName: svelte
---

# Svelte

In this guide you will learn how to use the
[hanko-elements](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md) web components to
add authentication and a user profile to your Svelte application.

## Install dependencies
Install the `@teamhanko/hanko-elements` package:

```shell npm2yarn
npm install @teamhanko/hanko-elements
```

## Add `<hanko-auth>` component

To provide a login interface in your app, use the `<hanko-auth>` web component. To do so, first import the `register`
function from `@teamhanko/hanko-elements` in your Svelte component. Call it with the URL of the Hanko API as an argument
to register the `<hanko-auth>` element with
the browser's [`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the `<hanko-auth>` element in your component.

:::info

If you are using [Hanko Cloud](https://cloud.hanko.io), you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.

:::

```js title="HankoAuth.svelte" showLineNumbers
<script>
  import { onMount } from "svelte";
  import { register } from '@teamhanko/hanko-elements';

  const hankoApi = "<YOUR_API_URL>";

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
    });
  });
</script>

<hanko-auth />
```

## Add `<hanko-events>` component

The `<hanko-events>` component provides a convenient way to subscribe to specific
[events](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#events) without displaying any UI elements.
The other hanko-elements will also dispatch these events.

To utilize this functionality in your Svelte application, you can leverage Svelte's event binding mechanism and define
callback functions within your component. This allows you to respond to the dispatched events accordingly.

Import the `register` function from `@teamhanko/hanko-elements` in your Svelte component. Call it with the URL of the
Hanko API as an argument to register the `<hanko-events>` element with the browser's
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the element in your component template.

```js title="HankoAuth.svelte" showLineNumbers
<script>
  import { onMount } from "svelte";
  // highlight-next-line
  import { useNavigate } from "svelte-navigator";
  import { register } from '@teamhanko/hanko-elements';

  const hankoApi = "<YOUR_API_URL>";
  // highlight-next-line
  const navigate = useNavigate();

  // highlight-start
  const redirectAfterLogin = () => {
    // successfully logged in, redirect to a page in your application
    navigate('...');
  };
  // highlight-end

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
    });
  });

</script>
// highlight-next-line
<hanko-events on:onAuthFlowCompleted={redirectAfterLogin} />
<hanko-auth />
```

Alternatively, subscribe directly on the `<hanko-auth>` element:

```js showLineNumbers
<hanko-auth on:onAuthFlowCompleted={redirectAfterLogin} />
```

## Add `<hanko-profile>` component {#hanko-profile}

To provide a page where users can manage their email addresses, password and passkeys, use the `<hanko-profile>` web
component. Just as with the `<hanko-auth>` component, import the `register` function from `@teamhanko/hanko-elements` in
your Svelte component. Call it with the
URL of the Hanko API as an argument to register the `<hanko-profile>` element with the browser's
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry). Then use
the element in your component.

```js title="HankoProfile.svelte" showLineNumbers
<script>
  import { register } from "@teamhanko/hanko-elements";

  const hankoApi = "<YOUR_API_URL>";

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  });
</script>

<hanko-profile />
```

## Implement logout

Use the Hanko client provided by `@teamhanko/hanko-elements` to log out users. On logout a custom event is
dispatched that you can subscribe to:

```js title="HankoProfile.svelte" showLineNumbers
<script>
  // highlight-start
  import { useNavigate } from "svelte-navigator";
  import { register, Hanko } from "@teamhanko/hanko-elements";
  // highlight-end

  const hankoApi = "<YOUR_API_URL>";
  // highlight-start
  const navigate = useNavigate();
  const hanko = new Hanko(hankoApi);
  // highlight-end

  // highlight-start
  const logout = () => {
    hanko.user.logout().catch((error) => {
      // handle error
    })
  }
  // highlight-end

  // highlight-start
  const redirectAfterLogout = () => {
    navigate("...");
  }
  // highlight-end

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  });
</script>
// highlight-start
<button on:click={logout}>Logout</button>
<hanko-profile on:onUserLoggedOut={redirectAfterLogout} />
// highlight-end
```

## Customize component styles

The styles of the `hanko-auth` and `hanko-profile` elements can be customized using CSS variables and parts. See our guide
on customization [here](https://github.com/teamhanko/hanko/tree/main/frontend/elements#ui-customization).

## Authenticate backend requests

If you want to authenticate requests in your own backend, please view our [backend guide](/guides/backend).
